<form #authConfigFrom="ngForm" class="form">
    <section class="form-block">
        <div class="form-group">
            <label for="authMode">{{'CONFIG.AUTH_MODE' | translate }}</label>
            <div class="select">
                <select id="authMode" name="authMode" (change)="handleOnChange($event)" [disabled]="disabled(currentConfig.auth_mode)" [(ngModel)]="currentConfig.auth_mode.value">
                    <option value="db_auth">{{'CONFIG.AUTH_MODE_DB' | translate }}</option>
                    <option value="ldap_auth">{{'CONFIG.AUTH_MODE_LDAP' | translate }}</option>
                    <option value="uaa_auth">{{'CONFIG.AUTH_MODE_UAA' | translate }}</option>
                </select>
            </div>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top: -1px;">
                <clr-icon shape="info-circle" size="24" class="info-tips-icon"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.AUTH_MODE' | translate}}</span>
            </a>
        </div>
    </section>

    <section class="form-block" *ngIf="showUAA">
        <div class="form-group">
            <label for="uaa-endpoint" class="required">{{'CONFIG.UAA.ENDPOINT' | translate}}</label>
            <input type="text" id="uaa-endpoint" name="uaa-endpoint" size="35"
            [(ngModel)]="currentConfig.uaa_endpoint.value" [disabled]="!currentConfig.uaa_verify_cert.editable">
        </div>
        <div class="form-group">
            <label for="uaa-id" class="required">{{'CONFIG.UAA.CLIENT_ID' | translate}}</label>
            <input type="text" id="uaa-cid" name="uaa-client-id" size="35"
            [(ngModel)]="currentConfig.uaa_client_id.value" [disabled]="!currentConfig.uaa_verify_cert.editable">
        </div>
        <div class="form-group">
            <label for="uaa-id" class="required">{{'CONFIG.UAA.CLIENT_SECRET' | translate}}</label>
            <input type="text" id="uaa-secret" name="uaa-client-secret" type="password" size="35"
            [(ngModel)]="currentConfig.uaa_client_secret.value" [disabled]="!currentConfig.uaa_verify_cert.editable">
        </div>
        <div class="form-group">
            <label for="uaa-cert" class="required">{{'CONFIG.UAA.VERIFY_CERT' | translate}}</label>
            <clr-checkbox id="uaa-cert" name="uaa-cert" [(clrChecked)]="currentConfig.uaa_verify_cert.value"
            [clrDisabled]="!currentConfig.uaa_verify_cert.editable"></clr-checkbox>
        </div>
    </section>

    <section class="form-block" *ngIf="showLdap">
        <div class="form-group">
            <label for="ldapUrl" class="required">{{'CONFIG.LDAP.URL' | translate}}</label>
            <label for="ldapUrl" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-lg tooltip-top-right" [class.invalid]="ldapUrlInput.invalid && (ldapUrlInput.dirty || ldapUrlInput.touched)">
                      <input name="ldapUrl" type="text" #ldapUrlInput="ngModel" [(ngModel)]="currentConfig.ldap_url.value" 
                      required 
                      id="ldapUrl" 
                      size="40" 
                      [disabled]="disabled(currentConfig.ldap_url)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="ldapSearchDN">{{'CONFIG.LDAP.SEARCH_DN' | translate}}</label>
            <label for="ldapSearchDN" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-lg tooltip-top-right">
                      <input name="ldapSearchDN" type="text" #ldapSearchDNInput="ngModel" [(ngModel)]="currentConfig.ldap_search_dn.value" 
                      id="ldapSearchDN" 
                      size="40" [disabled]="disabled(currentConfig.ldap_search_dn)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top:-1px;">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.LDAP_SEARCH_DN' | translate}}</span>
            </a>
        </div>
        <div class="form-group">
            <label for="ldapSearchPwd">{{'CONFIG.LDAP.SEARCH_PWD' | translate}}</label>
            <label for="ldapSearchPwd" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-lg tooltip-top-right">
                      <input name="ldapSearchPwd" type="password" #ldapSearchPwdInput="ngModel" [(ngModel)]="currentConfig.ldap_search_password.value" 
                      id="ldapSearchPwd" 
                      size="40" [disabled]="disabled(currentConfig.ldap_search_password)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="ldapBaseDN" class="required">{{'CONFIG.LDAP.BASE_DN' | translate}}</label>
            <label for="ldapBaseDN" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-lg tooltip-top-right" [class.invalid]="ldapBaseDNInput.invalid && (ldapBaseDNInput.dirty || ldapBaseDNInput.touched)">
                      <input name="ldapBaseDN" type="text" #ldapBaseDNInput="ngModel" [(ngModel)]="currentConfig.ldap_base_dn.value" 
                      required 
                      id="ldapBaseDN" 
                      size="40" [disabled]="disabled(currentConfig.ldap_base_dn)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top: -1px;">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.LDAP_BASE_DN' | translate}}</span>
            </a>
        </div>
        <div class="form-group">
            <label for="ldapFilter">{{'CONFIG.LDAP.FILTER' | translate}}</label>
            <label for="ldapFilter" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-lg tooltip-top-right">
                      <input name="ldapFilter" type="text" #ldapFilterInput="ngModel" [(ngModel)]="currentConfig.ldap_filter.value" 
                      id="ldapFilter" 
                      size="40" [disabled]="disabled(currentConfig.ldap_filter)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
        </div>
        <div class="form-group">
            <label for="ldapUid" class="required">{{'CONFIG.LDAP.UID' | translate}}</label>
            <label for="ldapUid" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-lg tooltip-top-right" [class.invalid]="ldapUidInput.invalid && (ldapUidInput.dirty || ldapUidInput.touched)">
                      <input name="ldapUid" type="text" #ldapUidInput="ngModel" [(ngModel)]="currentConfig.ldap_uid.value" 
                      required 
                      id="ldapUid" 
                      size="40" [disabled]="disabled(currentConfig.ldap_uid)">
                      <span class="tooltip-content">
                          {{'TOOLTIP.ITEM_REQUIRED' | translate}}
                      </span>
                    </label>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top: -1px;">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.LDAP_UID' | translate}}</span>
            </a>
        </div>
        <div class="form-group">
            <label for="ldapScope">{{'CONFIG.LDAP.SCOPE' | translate}}</label>
            <div class="select">
                <select id="ldapScope" name="ldapScope" [(ngModel)]="currentConfig.ldap_scope.value" [disabled]="disabled(currentConfig.ldap_scope)">
                    <option value="0">{{'CONFIG.SCOPE_BASE' | translate }}</option>
                    <option value="1">{{'CONFIG.SCOPE_ONE_LEVEL' | translate }}</option>
                    <option value="2">{{'CONFIG.SCOPE_SUBTREE' | translate }}</option>
                </select>
            </div>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-1px;">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.LDAP_SCOPE' | translate}}</span>
            </a>
        </div>
        <div class="form-group">
            <label for="ldapVerifyCert">{{'CONFIG.LDAP.VERIFY_CERT' | translate}}</label>
            <clr-checkbox name="ldapVerifyCert" id="ldapVerifyCert" [clrChecked]="currentConfig.ldap_verify_cert.value" [clrDisabled]="disabled(currentConfig.ldap_scope)" (clrCheckedChange)="setVerifyCertValue($event)">
                <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-7px;">
                    <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                    <span class="tooltip-content">{{'CONFIG.TOOLTIP.VERIFY_CERT' | translate}}</span>
                </a>
            </clr-checkbox>
        </div>
    </section>
    <section class="form-block">
        <div class="form-group">
            <label for="proCreation">{{'CONFIG.PRO_CREATION_RESTRICTION' | translate}}</label>
            <div class="select">
                <select id="proCreation" name="proCreation" [(ngModel)]="currentConfig.project_creation_restriction.value" [disabled]="disabled(currentConfig.project_creation_restriction)">
                    <option value="everyone">{{'CONFIG.PRO_CREATION_EVERYONE' | translate }}</option>
                    <option value="adminonly">{{'CONFIG.PRO_CREATION_ADMIN' | translate }}</option>
                </select>
            </div>
            <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg tooltip-top-right" style="top: -1px;">
                <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                <span class="tooltip-content">{{'CONFIG.TOOLTIP.PRO_CREATION_RESTRICTION' | translate}}</span>
            </a>
        </div>
        <div class="form-group" *ngIf="showSelfReg">
            <label for="selfReg">{{'CONFIG.SELF_REGISTRATION' | translate}}</label>
            <clr-checkbox name="selfReg" id="selfReg" [(ngModel)]="currentConfig.self_registration.value" [disabled]="disabled(currentConfig.self_registration)">
                <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="tooltip tooltip-top-right" style="top:-7px;">
                    <clr-icon shape="info-circle" class="info-tips-icon" size="24"></clr-icon>
                    <span  *ngIf="checkable; else elseBlock" class="tooltip-content">{{'CONFIG.TOOLTIP.SELF_REGISTRATION_ENABLE' | translate}}</span>
                    <ng-template #elseBlock><span class="tooltip-content">{{'CONFIG.TOOLTIP.SELF_REGISTRATION_DISABLE' | translate}}</span></ng-template>
                </a>
            </clr-checkbox>
        </div>
    </section>
</form>